<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>layui-demo</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="layui/css/layui.css" media="all">
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css" />
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body class="layui-layout-body">
	<div class="layui-layout layui-layout-admin">

		<div id="editFormDiv" style="display: none;padding-top:15px;width:450px;">
			<form class="layui-form" action="" lay-filter="example">

				<div class="layui-form-item">
					<label class="layui-form-label">用户编号</label>
					<div class="layui-input-block">
						<input type="text" name="userid" id="userId" lay-verify="title"
							autocomplete="off" readonly class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">用户名</label>
					<div class="layui-input-block">
						<input type="text" name="username" id="userName"
							lay-verify="title" autocomplete="off" placeholder="请输入用户名"
							class="layui-input">
					</div>
				</div>


				<div class="layui-form-item">
					<label class="layui-form-label">用户电话</label>
					<div class="layui-input-block">
						<input type="text" name="usertel" id="userTel" lay-verify="title"
							autocomplete="off" placeholder="手机号码" class="layui-input">
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">等级</label>
					<div class="layui-input-block">
						<select name="userlevel" id="userLevel" lay-filter="aihao">
							<option value="0">管理员</option>
							<option value="1">普通用户</option>

						</select>
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">状态</label>
					<div class="layui-input-block">
						<select name="userstate" id="userState" lay-filter="aihao">
							<option value="1">启用</option>
							<option value="0">禁用</option>
						</select>
					</div>
				</div>


				<div class="layui-form-item">
					<div class="layui-input-block">
						<button class="layui-btn btn-update" type="button" lay-submit=""
							lay-filter="demo1">立即提交</button>
					</div>
				</div>
			</form>
		</div>


		<div id="addFormDiv" style="display: none; padding: 20px 30px 0 0;">
			<form class="layui-form" action="" lay-filter="example">


				<div class="layui-form-item">
					<label class="layui-form-label">用户名</label>
					<div class="layui-input-block">
						<input type="text" name="username" id="userName1"
							lay-verify="title" autocomplete="off" placeholder="请输入用户名"
							class="layui-input">
					</div>
				</div>


				<div class="layui-form-item layui-form-text">
					<label class="layui-form-label">用户密码</label>
					<div class="layui-input-block">
						<input type="text" name="userpwd" id="userPwd1" lay-verify="title"
							autocomplete="off" placeholder="请输入密码" class="layui-input">
					</div>
				</div>

				<div class="layui-form-item layui-form-text">
					<label class="layui-form-label">手机号码</label>
					<div class="layui-input-block">
						<input type="tel" name="usertel" id="userTel1" lay-verify="title"
							autocomplete="off" placeholder="请输入手机号码" class="layui-input">
					</div>
				</div>
					<div class="layui-form-item">
					<label class="layui-form-label">等级</label>
					<div class="layui-input-block">
						<select name="userlevel" id="userLevel1" lay-filter="aihao">
							<option value="0">管理员</option>
							<option value="1">普通用户</option>

						</select>
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">状态</label>
					<div class="layui-input-block">
						<select name="userstate" id="userState1" lay-filter="aihao">
							<option value="1">启用</option>
							<option value="0">禁用</option>
						</select>
					</div>
				</div>
				
				<div class="layui-form-item">
					<div class="layui-input-block">
						<button class="layui-btn btn-update" type="button" lay-submit=""
							lay-filter="demo2">立即提交</button>
					</div>
				</div>
			</form>
		</div>



		<div>
			<!-- 内容主体区域 -->
			<div style="padding: 15px;">
				<div class="demoTable">
					搜索名字：
					<div class="layui-inline">
						<input class="layui-input" name="id" id="demoReload"
							autocomplete="off">
					</div>
					<button class="layui-btn" data-type="reload">搜索</button>
				</div>
				<table class="layui-hide" id="test" lay-filter="test"></table>
			</div>
		</div>
	</div>


	<script type="text/html" id="toolbarDemo">
		<div class="layui-btn-container">
 		<button class="layui-btn layui-btn-sm" lay-event="AddBlog">添加用户</button>
 		<button class="layui-btn layui-btn-sm" lay-event="admin">管理员</button>
 		<button class="layui-btn layui-btn-sm" lay-event="user">用户</button>
 		 </div>

</script>

	<script type="text/html" id="barDemo">
		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
		<a class="layui-btn layui-btn-xs" lay-event="resetpic">重置头像</a>
		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="resetpwd">重置密码</a>
	</script>
	<script type="text/html" id="imgTpl">
		<img src="{{ d.userpic }}">
	</script>
	<style type="text/css">
		.layui-table-cell {
			height: auto;
			line-height: 100px;
		}
	</style>

	<script src="layui/layui.js" charset="utf-8"></script>
	<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

	<script>
		layui.use('table', function() {
			var table = layui.table;
			table.render({
				elem: '#test',
				url: 'userspage', //地址和springmvc中控制器地址一致
				toolbar: '#toolbarDemo',
				title: '用户表',
				width : 1680,
				height : 700,
				cols: [
					[{
							type: 'checkbox',
							fixed: 'left'
						}, {
							field: 'userid',
							title: '编号',
							width: '8%',
							fixed: 'left',
							unresize: true,
							sort: true
						}, {
							field: 'username',
							title: '用户名',
							width: '10%'
						}, {
							field: 'userpwd',
							title: '用户密码',
							width: '13%',
						}, {
							field: 'usertel',
							title: '手机号码',
							width: '14%'
						}, {
							field: 'userpic',
							title: '用户头像',
							width: '16%',
							templet : "#imgTpl"
						},
						{
							field: 'userpower',
							title: '权限',
							width: '8%',
							templet: function(data) {
								return data.userpower == 0 ? "管理员" : "用户";
							}
						}, {
							field: 'usercondition',
							title: '状态',
							width: '8%',
							templet: function(data) {
								return data.usercondition == 0 ? "禁用" : "启用";
							}
						}, {
							fixed: 'right',
							title: '操作',
							toolbar: '#barDemo',
							width: '19%'
						}
					]
				],
				page: true,
				id: 'testReload'
			});

			//头工具栏事件
			table.on('toolbar(test)', function(obj) {
				var checkStatus = table.checkStatus(obj.config.id);
				switch (obj.event) {
					case 'getCheckData':
						var data = checkStatus.data;
						/* layer.alert(JSON.stringify(data)); */
						layer.alert(data.userid);
						console.log(JSON.stringify(data));
						break;
					case 'AddBlog':
						layer.open({
							type: 1 //弹出层 div
								,
							area: ['800px', '530px'],
							shade: 0.6,
							id: 'LAY_layuipro1' //设定一个id，防止重复弹出
								,
							
							content: $("#addFormDiv"), //后面不用.html()
						
						})
						break;
					case 'admin':
						// alert("admin");
						$.ajax({
							url : "userspage",
							type : "get",
							success : function() {
								//执行重载
								table.reload('testReload', {
									page : {
										curr : 1
									//重新从第 1 页开始
									},
									where : { //检索的条件

										keywords: "0"
										
									}
								});
							},
						});
						break;
					case 'user':
						//alert("user");
						$.ajax({
							url : "userspage",
							type : "get",
							success : function() {
								//执行重载
								table.reload('testReload', {
									page : {
										curr : 1
									//重新从第 1 页开始
									},
									where : { //检索的条件

										keywords: "1"
										
									}
									
								});
							},
						});
						break;
					}
				})

			//监听行工具事件
			table.on('tool(test)', function(obj) {
				var data = obj.data;
				//console.log(obj)
				if (obj.event === 'del') {
					layer.confirm('真的删除用户'+data.username+'么', function(index) {
						//console.log(data); //得到的是当前行对应的数据信息
						console.log(data.userid);
						 $.ajax({
							type: "post", //提交方式
							url: "delUsers/"+data.userid,
							success: function(cm) {
								layer.msg(cm.msg, {
									time: 2000
									//两秒延迟
								}, function() {
									if (cm.msg == "删除成功") {

										location.replace(location.href);
									}

								});

							}
						}); 

					});
				} else if (obj.event === 'edit') {

					//先给我们的表单元素赋值
					$("#userId").attr("value", data.userid);
					$("#userName").attr("value", data.username);
					console.log($("#userName").val());
					$("#userTel").attr("value", data.usertel);
					layui.form.render('radio');

					//地址文本域 <textarea> 文字....</textarea>
					$("#userAddress").html(data.useraddress);

					//等级

					layer.open({
						type: 1 //弹出层 div
							,
						area: ['500px', '400px'],
						shade: 0.6,
						id: 'LAY_layuipro' //设定一个id，防止重复弹出
							,
						content: $("#editFormDiv"), //后面不用.html()

					});

					//表单的render
					layui.form.render();

				} else if (obj.event === 'resetpic') {
					layer.confirm('真的重置用户'+data.username+'的照片么', function(index) {
						//console.log(data); //得到的是当前行对应的数据信息
						console.log(data.userid);
						 $.ajax({
							type: "post", //提交方式
							url: "resetpic/"+data.userid,
							success: function(cm) {
								layer.msg(cm.msg, {
									time: 2000
									//两秒延迟
								}, function() {
									if (cm.msg == "重置成功") {

										location.replace(location.href);
									}

								});

							}
						}); 

					});
				}else if (obj.event === 'resetpwd') {
					layer.confirm('真的重置用户'+data.username+'的密码么', function(index) {
						//console.log(data); //得到的是当前行对应的数据信息
						console.log(data.userid);
						 $.ajax({
							type: "post", //提交方式
							url: "resetpwd/"+data.userid,
							success: function(cm) {
								layer.msg(cm.msg, {
									time: 2000
									//两秒延迟
								}, function() {
									if (cm.msg == "重置成功") {

										location.replace(location.href);
									}

								});

							}
						}); 

					});
				}
			});

			/*表格数据重载 模糊检索*/
			var $ = layui.$,
				active = {
					reload: function() {
						var demoReload = $('#demoReload');

						//执行重载
						table.reload('testReload', {
							page: {
								curr: 1
								//重新从第 1 页开始
							},
							where: { //检索的条件

								keywords: demoReload.val()
							}
						});
					}
				};

			$('.demoTable .layui-btn').on('click', function() {
				var type = $(this).data('type');
				active[type] ? active[type].call(this) : '';
			});

			/*修改 表单的提交 按钮的单击事件 ，监听1 */
			$(document).on("click", ".btn-update", function() {
				//可以实现 比较麻烦....
				console.log(layui.form.data);
			});

			//监听提交  新增加的代码  监听2
			layui.form.on('submit(demo1)', function(data) {
				var userId = $("#userId").val();
				var userName = $("#userName").val();
				var userPwd = $("#userPwd").val();
				var userTel = $("#userTel").val();
				var userLevel = $("#userLevel").val();
				var userState = $("#userState").val();
				console.log(userId+","+userName+","+userTel+","+userLevel+","+userState);
				//ajax请求实现访问控制器
			 	$.ajax({
					type: "post", //提交方式
					url: "updUsers", ////地址和springmvc中控制器地址一致
					data: JSON.stringify({
						userid:userId,
						username:userName,
						userpwd:userPwd,
						usertel:userTel, 
						userpower:userLevel, 
						usercondition:userState
						}), //提交给控制器的数据
					contentType: "application/json", //提交给控制的数据 格式
					success: function(cm) {
						console.log("cm :"+cm);
						console.log("cm.msg :"+cm.msg);
						layer.msg(cm.msg, {
							time: 2000
							//两秒延迟
						}, function() {
							if (cm.msg == "修改成功") {
								location.replace(location.href);
							}

						});

					}
				}); 

				return false;
			});

			layui.form.on('submit(demo2)', function(data) {
				var userName = $("#userName1").val();
				var userPwd = $("#userPwd1").val();
				var userTel = $("#userTel1").val();
				var userLevel = $("#userLevel1").val();
				var userState = $("#userState1").val();
				  $.ajax({
					type: "post",
					url: "addUsers",
					data: JSON.stringify({
						username:userName,
						userpwd:userPwd,
						usertel:userTel, 
						userpower:userLevel, 
						usercondition:userState
					}),
					contentType: "application/json",
					success: function(cm) {
						layer.msg(cm.msg, {
							time: 2000
							//两秒延迟
						},function() {
							if (cm.msg == "增加成功") {
								location.replace(location.href);
							}

						});
					}

				});  

			});
		});
	</script>


	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

	<script>
		//JavaScript代码区域
		layui.use('element', function() {
			var element = layui.element;

		});
		var isShow = true; //定义一个标志位
		$('.kit-side-fold').click(function() {
			//选择出所有的span，并判断是不是hidden
			$('.layui-nav-item span').each(function() {
				if ($(this).is(':hidden')) {
					$(this).show();
				} else {
					$(this).hide();
				}
			});
			//判断isshow的状态
			if (isShow) {
				$('.layui-side.layui-bg-black').width(60); //设置宽度
				$('.kit-side-fold i').css('margin-right', '70%'); //修改图标的位置
				//将footer和body的宽度修改
				$('.layui-body').css('left', 60 + 'px');
				$('.layui-footer').css('left', 60 + 'px');
				//将二级导航栏隐藏
				$('dd span').each(function() {
					$(this).hide();
				});
				//修改标志位
				isShow = false;
			} else {
				$('.layui-side.layui-bg-black').width(200);
				$('.kit-side-fold i').css('margin-right', '10%');
				$('.layui-body').css('left', 200 + 'px');
				$('.layui-footer').css('left', 200 + 'px');
				$('dd span').each(function() {
					$(this).show();
				});
				isShow = true;
			}
		});
	</script>

</body>
</html>
